<template>
    <header class="header">
        <nav class="navbar">
            <button class="menu-button" @click="toggleMenu">
                <i class="fa fa-bars"></i> 菜单
            </button>
            <ul class="nav-list" :class="{ 'show': showMenu }">
                <li class="nav-item" v-for="(item, index) in navItems" :key="index">
                    <router-link :to="item.path" class="nav-link">{{ item.name }}</router-link>
                </li>
            </ul>
        </nav>
    </header>
</template>

<script lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';

export default {
    name: 'Header',
    setup() {
        const navItems = ref([
            { name: 'FAQ平台', path: '/' },
            { name: '实用工具', path: '/tools' },
            { name: '文档征集活动', path: '/events' },
            { name: '关于我们', path: '/about' }
        ]);
        const showMenu = ref(false);

        const toggleMenu = () => {
            showMenu.value = !showMenu.value;
        };

        const closeMenu = (event: MouseEvent) => {
            if (showMenu.value && !(event.target as Element)?.closest('.navbar')) {
                showMenu.value = false;
            }
        };

        onMounted(() => {
            document.addEventListener('click', closeMenu);
        });

        onUnmounted(() => {
            document.removeEventListener('click', closeMenu);
        });

        return {
            navItems,
            showMenu,
            toggleMenu
        };
    }
};
</script>

<style scoped>
.header {
    background-color: #0076e5;
    padding: 1rem;
    width: 100%;
}

.navbar {
    display: flex;
    justify-content: space-around;
}

.menu-button {
    background: none;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
}

.nav-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 0.3s ease;
    transform: translateX(-100%);
    background-color: #3c546b;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 200px;
    z-index: 1000;
}

.nav-list.show {
    transform: translateX(0);
}

.nav-item {
    margin: 1rem 0;
}

.nav-link {
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    text-decoration: none;
    font-size: 1.2rem;
}

@media (min-width: 768px) {
    .nav-list {
        flex-direction: row;
        position: static;
        transform: translateX(0);
        background-color: transparent;
        width: auto;
    }

    .nav-item {
        margin: 0 1rem;
    }

    .menu-button {
        display: none;
    }
}
</style>